<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>软件发布中心 - 开发者平台</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#2563EB', // 主色调：科技蓝
                        secondary: '#10B981', // 辅助色：成功绿
                        warning: '#F59E0B', // 警告色：橙色
                        danger: '#EF4444', // 危险色：红色
                        dark: '#1E293B',
                        light: '#F8FAFC'
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .form-input-focus {
                @apply focus:ring-2 focus:ring-primary/50 focus:border-primary focus:outline-none transition-all;
            }
            .btn-hover {
                @apply transition-all duration-200 hover:shadow-md transform hover:-translate-y-0.5 active:translate-y-0;
            }
            .card-shadow {
                @apply shadow-sm hover:shadow-md transition-shadow duration-300;
            }
            .tag-item {
                @apply bg-primary/10 text-primary px-3 py-1 rounded-full text-sm flex items-center gap-1;
            }
        }
    </style>
</head>
<body class="bg-gray-50 font-inter text-dark min-h-screen flex flex-col">
    <!-- 顶部导航栏 -->
    <header class="bg-white shadow-sm sticky top-0 z-50">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center h-16">
                <!-- 品牌标识 -->
                <a href="#" class="flex items-center space-x-2">
                    <i class="fa fa-cubes text-primary text-2xl"></i>
                    <span class="text-xl font-bold">开发者平台</span>
                </a>

                <!-- 主导航 - 桌面端 -->
                <nav class="hidden md:flex items-center space-x-8">
                    <a href="#" class="text-gray-600 hover:text-primary transition-colors">首页</a>
                    <a href="#" class="text-gray-600 hover:text-primary transition-colors">我的软件</a>
                    <a href="#" class="text-primary font-medium border-b-2 border-primary pb-0.5">发布软件</a>
                    <a href="#" class="text-gray-600 hover:text-primary transition-colors">数据分析</a>
                    <a href="#" class="text-gray-600 hover:text-primary transition-colors">开发者社区</a>
                </nav>

                <!-- 用户区域 -->
                <div class="flex items-center space-x-4">
                    <button class="text-gray-600 hover:text-primary transition-colors relative p-1.5">
                        <i class="fa fa-bell-o text-lg"></i>
                        <span class="absolute -top-0.5 -right-0.5 w-4 h-4 bg-red-500 rounded-full text-white text-xs flex items-center justify-center">3</span>
                    </button>
                    <div class="relative group">
                        <div class="flex items-center space-x-2 cursor-pointer">
                            <img src="https://picsum.photos/id/1005/200/200" alt="用户头像" class="w-8 h-8 rounded-full object-cover border-2 border-transparent hover:border-primary transition-colors">
                            <span class="text-gray-700 hidden sm:inline">李开发</span>
                            <i class="fa fa-angle-down text-gray-500 text-xs"></i>
                        </div>
                        <!-- 用户下拉菜单 -->
                        <div class="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg py-2 z-50 hidden group-hover:block">
                            <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-primary/5 hover:text-primary">个人中心</a>
                            <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-primary/5 hover:text-primary">账号设置</a>
                            <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-primary/5 hover:text-primary">开发者认证</a>
                            <div class="border-t border-gray-100 my-1"></div>
                            <a href="#" class="block px-4 py-2 text-sm text-red-500 hover:bg-red-50">退出登录</a>
                        </div>
                    </div>
                    <!-- 移动端菜单按钮 -->
                    <button id="mobile-menu-btn" class="md:hidden text-gray-600 p-1.5">
                        <i class="fa fa-bars text-xl"></i>
                    </button>
                </div>
            </div>

            <!-- 移动端导航菜单 -->
            <div id="mobile-menu" class="md:hidden hidden pb-4 border-t">
                <nav class="flex flex-col space-x-1 p-2">
                    <a href="#" class="text-gray-600 hover:text-primary transition-colors px-3 py-2 rounded-md hover:bg-gray-50">首页</a>
                    <a href="#" class="text-gray-600 hover:text-primary transition-colors px-3 py-2 rounded-md hover:bg-gray-50">我的软件</a>
                    <a href="#" class="text-primary font-medium px-3 py-2 rounded-md bg-primary/5">发布软件</a>
                    <a href="#" class="text-gray-600 hover:text-primary transition-colors px-3 py-2 rounded-md hover:bg-gray-50">数据分析</a>
                    <a href="#" class="text-gray-600 hover:text-primary transition-colors px-3 py-2 rounded-md hover:bg-gray-50">开发者社区</a>
                </nav>
            </div>
        </div>
    </header>

    <!-- 主内容区 -->
    <main class="flex-grow container mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <!-- 页面标题与进度 -->
        <section id="page-header" class="mb-8">
            <div class="flex flex-wrap items-center justify-between gap-4 mb-6">
                <div>
                    <h1 class="text-[clamp(1.5rem,3vw,2rem)] font-bold">发布新软件</h1>
                    <p class="text-gray-500 mt-1">填写软件信息，上传安装包，完成发布流程</p>
                </div>
                <div class="flex items-center gap-3">
                    <button id="save-draft" class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 transition-colors btn-hover">
                        <i class="fa fa-save mr-1"></i> 保存草稿
                    </button>
                    <button id="submit-software" class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors btn-hover">
                        <i class="fa fa-paper-plane mr-1"></i> 提交审核
                    </button>
                </div>
            </div>

            <!-- 进度指示器 -->
            <div id="progress-indicator" class="relative">
                <div class="hidden md:flex items-center justify-between mb-2">
                    <span class="text-sm font-medium text-primary">1. 基础信息</span>
                    <span class="text-sm font-medium text-gray-400">2. 版本与文件</span>
                    <span class="text-sm font-medium text-gray-400">3. 功能与截图</span>
                    <span class="text-sm font-medium text-gray-400">4. 完成提交</span>
                </div>
                <div class="w-full h-2 bg-gray-200 rounded-full overflow-hidden">
                    <div class="h-full bg-primary rounded-full" style="width: 25%"></div>
                </div>
                <div class="flex justify-between mt-2 md:hidden">
                    <span class="text-xs text-primary font-medium">步骤 1/4</span>
                    <span class="text-xs text-gray-500">基础信息</span>
                </div>
            </div>
        </section>

        <div class="flex flex-col lg:flex-row gap-8">
            <!-- 左侧表单区域 -->
            <div class="lg:w-2/3 space-y-6">
                <!-- 软件基础信息 -->
                <section id="basic-info" class="bg-white rounded-xl shadow-sm p-6 card-shadow">
                    <h2 class="text-lg font-semibold mb-4 flex items-center">
                        <i class="fa fa-info-circle text-primary mr-2"></i>
                        软件基础信息
                    </h2>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label for="software-name" class="block text-sm font-medium text-gray-700 mb-1">软件名称 <span class="text-red-500">*</span></label>
                            <input 
                                type="text" 
                                id="software-name" 
                                placeholder="请输入软件的正式名称" 
                                class="w-full px-4 py-2.5 border border-gray-300 rounded-lg form-input-focus"
                            >
                            <p class="mt-1 text-xs text-gray-500">建议使用简洁、易于记忆的名称，不超过20个字符</p>
                        </div>
                        <div>
                            <label for="software-slug" class="block text-sm font-medium text-gray-700 mb-1">软件标识（URL）</label>
                            <div class="flex items-center">
                                <span class="text-gray-500 text-sm mr-2">https://devplatform.com/app/</span>
                                <input 
                                    type="text" 
                                    id="software-slug" 
                                    placeholder="英文标识" 
                                    class="flex-grow px-4 py-2.5 border border-gray-300 rounded-lg form-input-focus"
                                >
                            </div>
                            <p class="mt-1 text-xs text-gray-500">仅允许字母、数字和连字符，用于生成软件专属链接</p>
                        </div>
                        <div>
                            <label for="software-category" class="block text-sm font-medium text-gray-700 mb-1">软件分类 <span class="text-red-500">*</span></label>
                            <select 
                                id="software-category" 
                                class="w-full px-4 py-2.5 border border-gray-300 rounded-lg form-input-focus appearance-none bg-white"
                            >
                                <option value="">请选择分类</option>
                                <option value="development">开发工具</option>
                                <option value="design">设计软件</option>
                                <option value="productivity">生产力工具</option>
                                <option value="education">教育学习</option>
                                <option value="media">音视频工具</option>
                                <option value="utility">系统工具</option>
                                <option value="other">其他类别</option>
                            </select>
                            <p class="mt-1 text-xs text-gray-500">选择最符合软件定位的分类，有助于用户发现</p>
                        </div>
                        <div>
                            <label for="software-version" class="block text-sm font-medium text-gray-700 mb-1">当前版本 <span class="text-red-500">*</span></label>
                            <input 
                                type="text" 
                                id="software-version" 
                                placeholder="如：1.0.0" 
                                class="w-full px-4 py-2.5 border border-gray-300 rounded-lg form-input-focus"
                            >
                            <p class="mt-1 text-xs text-gray-500">建议遵循语义化版本规范（主版本.次版本.修订号）</p>
                        </div>
                        <div>
                            <label for="software-language" class="block text-sm font-medium text-gray-700 mb-1">软件语言</label>
                            <select 
                                id="software-language" 
                                class="w-full px-4 py-2.5 border border-gray-300 rounded-lg form-input-focus appearance-none bg-white"
                            >
                                <option value="zh-CN">简体中文</option>
                                <option value="en-US">英文</option>
                                <option value="zh-TW">繁体中文</option>
                                <option value="ja-JP">日语</option>
                                <option value="ko-KR">韩语</option>
                                <option value="multi">多语言</option>
                            </select>
                        </div>
                        <div>
                            <label for="software-license" class="block text-sm font-medium text-gray-700 mb-1">开源协议（如适用）</label>
                            <select 
                                id="software-license" 
                                class="w-full px-4 py-2.5 border border-gray-300 rounded-lg form-input-focus appearance-none bg-white"
                            >
                                <option value="">非开源软件</option>
                                <option value="mit">MIT License</option>
                                <option value="apache">Apache License 2.0</option>
                                <option value="gpl">GNU General Public License v3.0</option>
                                <option value="bsd">BSD 3-Clause License</option>
                                <option value="other">其他协议</option>
                            </select>
                        </div>
                    </div>
                </section>

                <!-- 软件描述信息 -->
                <section id="description-info" class="bg-white rounded-xl shadow-sm p-6 card-shadow">
                    <h2 class="text-lg font-semibold mb-4 flex items-center">
                        <i class="fa fa-file-text-o text-primary mr-2"></i>
                        软件描述信息
                    </h2>
                    <div class="space-y-6">
                        <div>
                            <label for="software-short-desc" class="block text-sm font-medium text-gray-700 mb-1">软件简介 <span class="text-red-500">*</span></label>
                            <textarea 
                                id="software-short-desc" 
                                rows="2" 
                                placeholder="简要介绍软件的核心功能和价值，不超过100字" 
                                class="w-full px-4 py-2.5 border border-gray-300 rounded-lg form-input-focus resize-none"
                            ></textarea>
                            <p class="mt-1 text-xs text-gray-500">将显示在软件列表和搜索结果中，简洁明了地展示软件价值</p>
                        </div>
                        <div>
                            <label for="software-full-desc" class="block text-sm font-medium text-gray-700 mb-1">详细描述 <span class="text-red-500">*</span></label>
                            
                            <!-- 富文本编辑器工具栏 -->
                            <div class="border-b border-gray-200 pb-2 mb-3 flex flex-wrap gap-1">
                                <button class="p-1.5 text-gray-600 hover:bg-gray-100 rounded hover:text-primary transition-colors" title="加粗">
                                    <i class="fa fa-bold"></i>
                                </button>
                                <button class="p-1.5 text-gray-600 hover:bg-gray-100 rounded hover:text-primary transition-colors" title="斜体">
                                    <i class="fa fa-italic"></i>
                                </button>
                                <button class="p-1.5 text-gray-600 hover:bg-gray-100 rounded hover:text-primary transition-colors" title="标题">
                                    <i class="fa fa-header"></i>
                                </button>
                                <button class="p-1.5 text-gray-600 hover:bg-gray-100 rounded hover:text-primary transition-colors" title="无序列表">
                                    <i class="fa fa-list-ul"></i>
                                </button>
                                <button class="p-1.5 text-gray-600 hover:bg-gray-100 rounded hover:text-primary transition-colors" title="有序列表">
                                    <i class="fa fa-list-ol"></i>
                                </button>
                                <span class="h-5 w-px bg-gray-300 mx-0.5"></span>
                                <button class="p-1.5 text-gray-600 hover:bg-gray-100 rounded hover:text-primary transition-colors" title="插入链接">
                                    <i class="fa fa-link"></i>
                                </button>
                                <button class="p-1.5 text-gray-600 hover:bg-gray-100 rounded hover:text-primary transition-colors" title="插入图片">
                                    <i class="fa fa-image"></i>
                                </button>
                                <button class="p-1.5 text-gray-600 hover:bg-gray-100 rounded hover:text-primary transition-colors" title="插入代码">
                                    <i class="fa fa-code"></i>
                                </button>
                                <span class="h-5 w-px bg-gray-300 mx-0.5"></span>
                                <button class="p-1.5 text-gray-600 hover:bg-gray-100 rounded hover:text-primary transition-colors" title="清除格式">
                                    <i class="fa fa-eraser"></i>
                                </button>
                            </div>
                            
                            <!-- 富文本编辑区 -->
                            <div 
                                id="software-full-desc" 
                                class="min-h-[300px] w-full px-4 py-3 border border-gray-300 rounded-lg form-input-focus"
                                contenteditable="true"
                            >
                                <p>请详细描述软件的功能特点、使用场景、技术亮点等内容...</p>
                                <p><br></p>
                                <p>建议包含：</p>
                                <ul>
                                    <li>软件的核心功能和优势</li>
                                    <li>与同类软件的差异化特点</li>
                                    <li>目标用户群体和使用场景</li>
                                    <li>技术架构或实现上的亮点</li>
                                    <li>使用教程或注意事项</li>
                                </ul>
                            </div>
                            
                            <div class="mt-3 flex justify-between items-center">
                                <p class="text-xs text-gray-500">建议内容详实，帮助用户全面了解软件功能和价值</p>
                                <span class="text-xs text-gray-500" id="char-count">0 字符</span>
                            </div>
                        </div>
                    </div>
                </section>

                <!-- 版本与安装包 -->
                <section id="version-package" class="bg-white rounded-xl shadow-sm p-6 card-shadow">
                    <h2 class="text-lg font-semibold mb-4 flex items-center">
                        <i class="fa fa-archive text-primary mr-2"></i>
                        版本与安装包
                    </h2>
                    
                    <div class="space-y-6">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-3">安装包上传 <span class="text-red-500">*</span></label>
                            
                            <div class="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center upload-area hover:border-primary hover:bg-primary/5 transition-all cursor-pointer">
                                <div class="max-w-md mx-auto">
                                    <i class="fa fa-cloud-upload text-4xl text-gray-400 mb-3"></i>
                                    <p class="text-gray-600 mb-2">拖拽安装包到此处或点击上传</p>
                                    <p class="text-xs text-gray-500 mb-4">支持 Windows (exe/msi)、macOS (dmg/pkg)、Linux (deb/rpm) 格式</p>
                                    <button class="px-4 py-2 bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200 transition-colors">
                                        选择安装包文件
                                    </button>
                                </div>
                            </div>
                            
                            <!-- 已上传文件列表 -->
                            <div id="uploaded-files" class="mt-4 hidden">
                                <div class="bg-gray-50 rounded-lg p-3 flex items-center justify-between">
                                    <div class="flex items-center">
                                        <i class="fa fa-file-exe-o text-primary mr-3 text-xl"></i>
                                        <div>
                                            <p class="text-sm font-medium">mysoftware-v1.0.0.exe</p>
                                            <p class="text-xs text-gray-500">2.4 MB · Windows 64位</p>
                                        </div>
                                    </div>
                                    <div class="flex items-center gap-3">
                                        <span class="text-xs text-green-600 bg-green-50 px-2 py-1 rounded-full">已上传</span>
                                        <button class="text-gray-400 hover:text-danger transition-colors">
                                            <i class="fa fa-trash-o"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div>
                            <label for="version-changelog" class="block text-sm font-medium text-gray-700 mb-1">更新日志</label>
                            <textarea 
                                id="version-changelog" 
                                rows="4" 
                                placeholder="描述当前版本的主要更新内容和修复的问题" 
                                class="w-full px-4 py-2.5 border border-gray-300 rounded-lg form-input-focus resize-none"
                            ></textarea>
                            <p class="mt-1 text-xs text-gray-500">清晰的更新日志有助于用户了解版本变化</p>
                        </div>
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                                <label for="min-requirements" class="block text-sm font-medium text-gray-700 mb-1">最低系统要求</label>
                                <input 
                                    type="text" 
                                    id="min-requirements" 
                                    placeholder="如：Windows 10+, 4GB RAM" 
                                    class="w-full px-4 py-2.5 border border-gray-300 rounded-lg form-input-focus"
                                >
                            </div>
                            <div>
                                <label for="file-checksum" class="block text-sm font-medium text-gray-700 mb-1">文件校验码 (SHA256)</label>
                                <input 
                                    type="text" 
                                    id="file-checksum" 
                                    placeholder="可选，用于验证文件完整性" 
                                    class="w-full px-4 py-2.5 border border-gray-300 rounded-lg form-input-focus"
                                >
                            </div>
                        </div>
                    </div>
                </section>

                <!-- 软件截图 -->
                <section id="software-screenshots" class="bg-white rounded-xl shadow-sm p-6 card-shadow">
                    <h2 class="text-lg font-semibold mb-4 flex items-center">
                        <i class="fa fa-picture-o text-primary mr-2"></i>
                        软件截图
                    </h2>
                    
                    <p class="text-sm text-gray-600 mb-4">上传软件截图展示界面和功能，至少1张，最多5张</p>
                    
                    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
                        <!-- 截图上传区域 -->
                        <div class="aspect-video border-2 border-dashed border-gray-300 rounded-lg flex items-center justify-center upload-screenshot hover:border-primary hover:bg-primary/5 transition-all cursor-pointer">
                            <i class="fa fa-plus text-2xl text-gray-400"></i>
                        </div>
                        
                        <!-- 已上传截图示例 (默认隐藏) -->
                        <div class="aspect-video rounded-lg overflow-hidden relative hidden screenshot-item">
                            <img src="https://picsum.photos/id/0/800/450" alt="软件截图" class="w-full h-full object-cover">
                            <button class="absolute top-2 right-2 bg-black/50 text-white p-1 rounded-full hover:bg-black/70 transition-colors">
                                <i class="fa fa-times"></i>
                            </button>
                        </div>
                    </div>
                    
                    <p class="mt-3 text-xs text-gray-500">
                        建议尺寸：1280×720像素，支持JPG、PNG格式，单张不超过5MB
                    </p>
                </section>
            </div>

            <!-- 右侧设置区域 -->
            <div class="lg:w-1/3 space-y-6">
                <!-- 软件标签 -->
                <section id="software-tags" class="bg-white rounded-xl shadow-sm p-6 card-shadow">
                    <h2 class="text-lg font-semibold mb-4 flex items-center">
                        <i class="fa fa-tags text-primary mr-2"></i>
                        软件标签
                    </h2>
                    
                    <div class="flex flex-wrap gap-2 mb-4" id="tags-container">
                        <!-- 标签会动态添加到这里 -->
                    </div>
                    
                    <div class="flex items-center gap-2">
                        <input 
                            type="text" 
                            id="tag-input" 
                            placeholder="输入标签，按回车添加（最多5个）" 
                            class="flex-1 px-4 py-2 border border-gray-300 rounded-lg form-input-focus"
                        >
                        <button id="add-tag" class="px-3 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors btn-hover">
                            添加
                        </button>
                    </div>
                    
                    <p class="mt-2 text-xs text-gray-500">标签用于分类和搜索，帮助用户快速找到你的软件</p>
                    
                    <div class="mt-4 pt-4 border-t border-gray-100">
                        <p class="text-xs text-gray-600 mb-2">热门标签：</p>
                        <div class="flex flex-wrap gap-2">
                            <span class="text-xs bg-gray-100 text-gray-700 px-2 py-1 rounded cursor-pointer hover:bg-primary/10 hover:text-primary transition-colors">工具</span>
                            <span class="text-xs bg-gray-100 text-gray-700 px-2 py-1 rounded cursor-pointer hover:bg-primary/10 hover:text-primary transition-colors">效率</span>
                            <span class="text-xs bg-gray-100 text-gray-700 px-2 py-1 rounded cursor-pointer hover:bg-primary/10 hover:text-primary transition-colors">免费</span>
                            <span class="text-xs bg-gray-100 text-gray-700 px-2 py-1 rounded cursor-pointer hover:bg-primary/10 hover:text-primary transition-colors">开源</span>
                            <span class="text-xs bg-gray-100 text-gray-700 px-2 py-1 rounded cursor-pointer hover:bg-primary/10 hover:text-primary transition-colors">Windows</span>
                            <span class="text-xs bg-gray-100 text-gray-700 px-2 py-1 rounded cursor-pointer hover:bg-primary/10 hover:text-primary transition-colors">macOS</span>
                        </div>
                    </div>
                </section>

                <!-- 联系与支持 -->
                <section id="support-info" class="bg-white rounded-xl shadow-sm p-6 card-shadow">
                    <h2 class="text-lg font-semibold mb-4 flex items-center">
                        <i class="fa fa-life-ring text-primary mr-2"></i>
                        联系与支持
                    </h2>
                    
                    <div class="space-y-4">
                        <div>
                            <label for="support-email" class="block text-sm font-medium text-gray-700 mb-1">支持邮箱</label>
                            <input 
                                type="email" 
                                id="support-email" 
                                placeholder="用户可以通过此邮箱联系你" 
                                class="w-full px-4 py-2.5 border border-gray-300 rounded-lg form-input-focus"
                            >
                        </div>
                        
                        <div>
                            <label for="support-url" class="block text-sm font-medium text-gray-700 mb-1">支持网址</label>
                            <input 
                                type="url" 
                                id="support-url" 
                                placeholder="软件官网或支持页面" 
                                class="w-full px-4 py-2.5 border border-gray-300 rounded-lg form-input-focus"
                            >
                        </div>
                        
                        <div>
                            <label for="source-code" class="block text-sm font-medium text-gray-700 mb-1">源代码地址 (如开源)</label>
                            <input 
                                type="url" 
                                id="source-code" 
                                placeholder="GitHub、GitLab等代码仓库地址" 
                                class="w-full px-4 py-2.5 border border-gray-300 rounded-lg form-input-focus"
                            >
                        </div>
                    </div>
                </section>

                <!-- 发布设置 -->
                <section id="publish-settings" class="bg-white rounded-xl shadow-sm p-6 card-shadow">
                    <h2 class="text-lg font-semibold mb-4 flex items-center">
                        <i class="fa fa-cog text-primary mr-2"></i>
                        发布设置
                    </h2>
                    
                    <div class="space-y-4">
                        <div>
                            <label class="flex items-center">
                                <input type="checkbox" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
                                <span class="ml-2 text-gray-700">允许用户评论</span>
                            </label>
                        </div>
                        
                        <div>
                            <label class="flex items-center">
                                <input type="checkbox" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
                                <span class="ml-2 text-gray-700">允许其他开发者fork/借鉴</span>
                            </label>
                        </div>
                        
                        <div>
                            <label class="flex items-center">
                                <input type="checkbox" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
                                <span class="ml-2 text-gray-700">发布后通知我的关注者</span>
                            </label>
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">发布范围</label>
                            <select class="w-full px-4 py-2.5 border border-gray-300 rounded-lg form-input-focus appearance-none">
                                <option value="public">公开发布（所有人可见）</option>
                                <option value="community">仅开发者社区可见</option>
                                <option value="private">私有发布（仅自己可见）</option>
                            </select>
                        </div>
                    </div>
                </section>

                <!-- 审核指南 -->
                <section id="review-guidelines" class="bg-white rounded-xl shadow-sm p-6 card-shadow">
                    <h2 class="text-lg font-semibold mb-4 flex items-center">
                        <i class="fa fa-check-square-o text-primary mr-2"></i>
                        审核指南
                    </h2>
                    
                    <ul class="space-y-2 text-sm text-gray-600">
                        <li class="flex items-start">
                            <i class="fa fa-check-circle text-green-500 mt-0.5 mr-2"></i>
                            <span>软件必须是原创或拥有合法发布权限</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-check-circle text-green-500 mt-0.5 mr-2"></i>
                            <span>不得包含恶意代码、病毒或有害内容</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-check-circle text-green-500 mt-0.5 mr-2"></i>
                            <span>不得侵犯任何第三方知识产权</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-check-circle text-green-500 mt-0.5 mr-2"></i>
                            <span>审核通常在1-3个工作日内完成</span>
                        </li>
                    </ul>
                    
                    <div class="mt-4 pt-4 border-t border-gray-100">
                        <label class="flex items-start">
                            <input type="checkbox" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded mt-0.5">
                            <span class="ml-2 text-gray-700 text-sm">我已阅读并同意遵守平台发布规则</span>
                        </label>
                    </div>
                </section>
            </div>
        </div>

        <!-- 底部操作按钮 -->
        <section id="action-buttons" class="mt-8 bg-white rounded-xl shadow-sm p-6 card-shadow">
            <div class="flex flex-wrap justify-between items-center gap-4">
                <button class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 transition-colors btn-hover">
                    <i class="fa fa-arrow-left mr-1"></i> 返回
                </button>
                
                <div class="flex items-center gap-3">
                    <button class="px-6 py-2.5 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 transition-colors btn-hover">
                        <i class="fa fa-save mr-1"></i> 保存草稿
                    </button>
                    <button class="px-6 py-2.5 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors btn-hover">
                        <i class="fa fa-paper-plane mr-1"></i> 提交审核
                    </button>
                </div>
            </div>
        </section>
    </main>

    <!-- 页脚 -->
    <footer class="bg-white border-t border-gray-200 mt-12 py-8">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="mb-4 md:mb-0">
                    <p class="text-sm text-gray-500">© 2023 开发者平台 版权所有</p>
                </div>
                <div class="flex space-x-6">
                    <a href="#" class="text-sm text-gray-500 hover:text-primary transition-colors">帮助中心</a>
                    <a href="#" class="text-sm text-gray-500 hover:text-primary transition-colors">发布规范</a>
                    <a href="#" class="text-sm text-gray-500 hover:text-primary transition-colors">联系我们</a>
                    <a href="#" class="text-sm text-gray-500 hover:text-primary transition-colors">隐私政策</a>
                </div>
            </div>
        </div>
    </footer>

    <script>
        // 移动端菜单切换
        document.getElementById('mobile-menu-btn').addEventListener('click', function() {
            const mobileMenu = document.getElementById('mobile-menu');
            mobileMenu.classList.toggle('hidden');
        });

        // 字符计数功能
        const fullDesc = document.getElementById('software-full-desc');
        const charCount = document.getElementById('char-count');
        
        fullDesc.addEventListener('input', function() {
            const text = this.innerText || '';
            charCount.textContent = `${text.length} 字符`;
        });

        // 标签添加功能
        const tagInput = document.getElementById('tag-input');
        const addTagBtn = document.getElementById('add-tag');
        const tagsContainer = document.getElementById('tags-container');
        const tagSuggestions = document.querySelectorAll('.tag-suggestions span');
        const MAX_TAGS = 5;

        function addTag(tagText) {
            // 验证标签
            if (!tagText.trim() || tagsContainer.children.length >= MAX_TAGS) return;
            
            // 检查是否已存在相同标签
            const existingTags = Array.from(tagsContainer.getElementsByClassName('tag-item'));
            if (existingTags.some(tag => tag.firstChild.textContent.trim() === tagText.trim())) {
                return;
            }
            
            // 创建标签元素
            const tag = document.createElement('div');
            tag.className = 'tag-item';
            tag.innerHTML = `
                ${tagText.trim()}
                <button class="remove-tag text-primary/70 hover:text-primary">
                    <i class="fa fa-times-circle"></i>
                </button>
            `;
            
            // 添加删除事件
            tag.querySelector('.remove-tag').addEventListener('click', function() {
                tag.remove();
            });
            
            tagsContainer.appendChild(tag);
            tagInput.value = '';
        }

        // 点击添加标签
        addTagBtn.addEventListener('click', function() {
            addTag(tagInput.value);
        });

        // 回车添加标签
        tagInput.addEventListener('keydown', function(e) {
            if (e.key === 'Enter') {
                e.preventDefault();
                addTag(this.value);
            }
        });

        // 热门标签点击添加
        document.querySelectorAll('.tag-suggestions span, .tag-style + span').forEach(tag => {
            tag.addEventListener('click', function() {
                addTag(this.textContent);
            });
        });

        // 模拟文件上传
        document.querySelector('.upload-area').addEventListener('click', function() {
            document.getElementById('uploaded-files').classList.remove('hidden');
        });

        // 模拟截图上传
        document.querySelector('.upload-screenshot').addEventListener('click', function() {
            document.querySelector('.screenshot-item').classList.remove('hidden');
        });

        // 移除已上传文件
        document.querySelector('#uploaded-files .fa-trash-o').parentElement.addEventListener('click', function() {
            document.getElementById('uploaded-files').classList.add('hidden');
        });

        // 移除已上传截图
        document.querySelector('.screenshot-item .fa-times').parentElement.addEventListener('click', function() {
            document.querySelector('.screenshot-item').classList.add('hidden');
        });
    </script>
</body>
</html>
